<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>文本溢出省略</title>
  <style>
  * { padding: 0; margin: 0; }
  * { box-sizing: border-box; }
  *::before { box-sizing: border-box; }
  *::after { box-sizing: border-box; }
  a { color: inherit; text-decoration: none; }
  ol, ul { list-style: none; }
  input { font: inherit; }

  html { font-size: 16px; line-height: 2; }
  hr { margin: 40px 0; border-style: dashed; }

  /*单行文本溢出省略*/

  div.single {
    height: 2em;
    border: 1px solid red;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /*多行文本溢出省略*/
  /*Weird WebKit Flexbox Way*/

  div.multi-container {
    border: 1px solid red;
    overflow: hidden;
  }
  div.multi {
    height: 6em; /* 正好三行 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  /*The Fade Out Way*/

  div.fade-container {
    border: 1px solid red;
    overflow: hidden;
  }
  div.fade {
    height: 6em; /* 正好三行 */
    position: relative;
  }
  div.fade:after {
    width: 70%; /* 控制右下角的空白空间宽度 */
    height: 2em; /* 正好是一行的高度，覆盖在最后一行上 */
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: right;
  }
  </style>
</head>
<body>
  <div class="single">单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略</div>
  <hr>
  <div class="multi-container">
    <div class="multi">多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略
    </div>
  </div>
  <hr>
  <div class="fade-container">
    <div class="fade">多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略多行文本溢出省略
    </div>
  </div>
</body>
</html>
